<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态组件</title>
  <script src="../../vue.js"></script>
  <style>
    * {
      list-style: none;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }
    
    #root {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    header {
      height: 44px;
      background-color: #4faf8c;
      color: #fff;
      text-align: center;
      line-height: 44px;
    }

    main {
      flex: 1;
    }

    footer {
      height: 44px;
      background-color: #f6f6f6;
    }

    ul {
      height: 100%;
      display: flex;
    }

    li {
      flex: 1;
      line-height: 44px;
      text-align: center;
    }
    li.active {
      background-color: #e9f3f0;
    }
  </style>
</head>
<body>
  <div id="root">
    <header>拉勾网</header>
    <main>
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </main>
    <footer>
      <ul>
        <li 
          v-for="tab,index in tabs"
          :class="{ active: tab.id === curId }"
          @click="handleClick(tab.id, tab.component)"
        >
          {{tab.name}}
        </li>
      </ul>
    </footer>
  </div>
  <script>
    Vue.config.productionTip = false

    const HomeTab1 = {
      template: `
        <div>求职</div>
      `
    }
    const HomeTab2 = {
      template: `
        <div>招聘</div>
      `
    }

    const Home = {
      data() {
        return {
          curId: 0,
          componentId: HomeTab1
        }
      },
      template: `
        <div>
          <ul>
            <li :class="{active: curId === 0}" @click="handleClick(0)">求职</li>
            <li :class="{active: curId === 1}" @click="handleClick(1)">招聘</li>
          </ul>
          <component :is="componentId"></component>
        </div>
      `,
      mounted() {
        console.log(0)
      },
      updated() {
        console.log('update')
      },
      destroyed() {
        console.log('destroyed')
      },
      activated() {
        console.log('activated.')
      },
      deactivated() {
        console.log('deactivated.')
      },
      methods: {
        handleClick(index) {
          this.curId = index
          this.componentId = this.curId === 0 ? HomeTab1 : HomeTab2
        }
      },
    }
    const Search = {
      template: `
        <div>search</div>
      `,
      mounted() {
       console.log(1)
      },
    }
    const Profile = {
      template: `
        <div>profile</div>
      `,
      mounted() {
        console.log(2)
      },
    }

    var vm = new Vue({
      el: '#root',
      data: {
        curId: '001',
        componentId: Home,
        tabs: [
          {
            id: '001',
            name: '首页',
            component: Home
          },
          {
            id: '002',
            name: '搜索',
            component: Search
          },
          {
            id: '003',
            name: '我的',
            component: Profile
          }
        ]
      },
      methods: {
        handleClick(index, component) {
          this.curId = index
          this.componentId = component
        }
      },
    })
  </script>
</body>
</html>